<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../index.js"></script>
    <link rel="stylesheet" type="text/css" href="../index.css">
    <script src="../js/jquery-3.7.1.js"></script>
    <!-- 引入 DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <!-- 引入 DataTables JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>活动管理</title>
    <style>
        .viewCard{
            width:90%;
            margin:30px auto;
            max-height: 800px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
        }
        .title{
            height:40px;
        }
        .title p{
            width:400px;
            height: 40px;
            line-height: 40px;
            font-size: 30px;
            font-weight: 700;
            float:left;
        }
        .title div{
            width:134px;
            height:40px;
            float:right;
            background-color: #3B82F6;
            text-align: center;
            line-height: 40px;
            color:white;
            cursor: pointer;
        }
        table{
            text-align: center;
        }
        .activity_table{
            margin-top:70px;
        }
        /* 针对操作按钮容器 */
        #activity_table td:last-child .action-buttons {
            display: flex;
            justify-content: center;
            gap: 8px; /* 设置按钮间距 */
        }
        .action-buttons button {
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 5px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .action-buttons button:hover {
            transform: scale(1.2);
        }

        .btn-view { color: #17a2b8; }
        .btn-edit { color: #ffc107; }
        .btn-delete { color: #dc3545; }
        #activity_table td:nth-child(5){
            width:200px;
        }

        .popup{
            display:none;
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            background: rgba(0, 0, 0, 0.6);
        }
        .popup>.popupBox{
            width:800px;
            height: 450px;
            margin:150px auto;
            background-color: white;
            border-radius: 10px;
        }
        .close{
            float: right;
            margin: 10px;
            width:20px;
            height:32px;
            cursor: pointer;
            font-size: 20px;
            text-align: center;
            line-height: 32px;
        }
        .inputArea{
            clear: both;
            width:90%;
            margin: 15px auto;
        }
        .inputArea p{
            width: 100%;
            height:30px;
        }
        .inputArea input,.a_state select{
            height:46px;
            width:95%;
        }
        .a_datetime{
            width:49%;
            float:left;
        }
        .popupBox .title{
            padding:15px;
            border-bottom:.5px solid black;
        }
        .popupBox button{
            clear: both;
            display: block;
            width:200px;
            height:40px;
            margin:170px auto;
            background-color: #3B82F6;
            color:white;
            border:none;
            cursor:pointer;
        }
        .topArea{
            height:80px;
            width:100%;
            margin-top:20px;
        }
        .statistics{
            width:250px;
            height:100%;
            border-radius: 10px;
            float:left;
            margin-left: 10px;
        }
        .statistics:nth-child(1){
            background-color: #EFF6FF;
            color:#3B82F6;
        }
        .statistics:nth-child(2){
            background-color: #F0FDF4;
            color: #16A34A;
        }
        .statistics>p:nth-child(1){
            font-size: 16px;
            padding:5px 10px;
        }
        .statistics>p:nth-child(2){
            font-size: 24px;
            padding:5px 10px;
            font-weight: 700;
        }
        .bottomArea{
            width:100%;
            height:270px;
            background-color: red;
        }
        #subItemScore{
            display: block;
            width:100%;
            height:100%;
        }
        .deleteConfirm{
            width:70%;
            height:auto;
            margin:0 auto;
        }
        .deleteConfirm p{
            width:100%;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            margin-top:90px;
        }
        .deleteConfirm span{
            color:red;
        }
        .deleteConfirm button{
            margin:100px 39px;
            display: inline-block;
        }
        .deleteConfirm>.closeBtn{
            background-color: gray;
            color:white;
        }
    </style>
</head>
<body>
    <div class="viewCard">
        <div class="title">
            <p>活动管理</p>
            <div id="createActivity"><i class="fas fa-plus"></i> 创建活动</div>
        </div>
        <div class="activity_table">
            <table id="activity_table">
                <thead>
                    <tr>
                        <th>活动名称</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>***活动</td>
                        <td>2025-5-15 15:30:50</td>
                        <td>2025-5-15 20:30:50</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="popup">
        <div class="popupBox">
            <div class="title">
                <p id="titleText"></p>
                <i class="close fa fa-times"></i>
            </div>
            <div class="popupContent">

            </div>
        </div>
    </div>
<script src="../js/activityManagement.js"></script>
</body>
</html>